<template>
    <div class="pad20">
        <div class="filter-container">
            <!--查询的表单数据-->
            <el-form :inline="true" :model="businessVo" size="mini">
                <el-form-item label="商家姓名：">
                    <el-input v-model.trim="businessVo.realName"></el-input>
                </el-form-item>
                <el-form-item label="手机号:">
                    <el-input v-model.trim="businessVo.phoneNumber"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button icon='el-icon-search' type="primary" @click="handleCheck">查询</el-button>
                    <el-button icon='el-icon-refresh' class="filter-item" @click="handleReset">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--详情的弹出框-->
        <el-dialog
                title="详情"
                :visible.sync="visible"
                width="60%">
            <el-table  size="medium" :data="infoList" stripe border>
                <el-table-column
                        label="营业执照"
                        width="110">

                    <template slot-scope="scope">
                        <el-image
                                style="width: 100px; height: 100px"
                                :src="scope.row.license"
                                :preview-src-list="srcList"
                                z-index="5000"
                                @click="setimglist(scope.row.license)">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column
                        label="身份证正面"
                        width="110">
                    <template slot-scope="scope">
                        <el-image
                                style="width: 100px; height: 100px"
                                :src="scope.row.cardfront"
                                :preview-src-list="srcList"
                                z-index="5000"
                                @click="setimglist(scope.row.cardfront)">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column
                        label="身份证反面"
                        width="110">
                    <template slot-scope="scope">
                        <el-image
                                style="width: 100px; height: 100px"
                                :src="scope.row.cardreverse"
                                :preview-src-list="srcList"
                                z-index="5000"
                                @click="setimglist(scope.row.cardreverse)">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="idcard" label="身份证号" align="center">
                </el-table-column>
            </el-table>
        </el-dialog>
        <!--数据表格-->
        <el-table  size="medium" :data="list" stripe border>
            <el-table-column type="index" label="序号" width="100" align="center">
            </el-table-column>
            <el-table-column label="用户编号" align="center" prop="userid">
            </el-table-column>
            <el-table-column prop="realname" label="商家姓名" align="center">
            </el-table-column>
            <el-table-column prop="tbUser.mobile" label="手机号" align="center">
            </el-table-column>
            <el-table-column prop="shop.name" label="店铺名称" align="center">
            </el-table-column>
            <el-table-column prop="gmtCreate" label="申请时间" align="center" >
            </el-table-column>
            <el-table-column prop="gmtModified" label="入驻时间" align="center">
            </el-table-column>
            <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                    <el-button  type="success" @click="handleEdit(scope.row)" size="mini">详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                style="float: right;margin-top: 20px; margin-bottom: 22px"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-size="page.pageSize"
                :page-sizes="[5, 8, 10, 15, 20, 30]"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.totalCount">
        </el-pagination>

    </div>
</template>

<script>
    export default {
        name: "businesslist",
        data() {
            return {
                visible: false,
                businessVo: {
                    realName:"",
                    phoneNumber:""
                },
                list: [],
                page: {
                    pageCurrent: 1,
                    pageSize: 5,
                    totalCount: 0,
                    totalPage: 0
                },
                srcList: [''],
                infoList: [],
            }
        },
        created() {
            this.searchBusiness()
        },
        methods: {
            // 商家分类分页列表接口
            searchBusiness(){
                var that =this
                // this.map.pageCurrent = this.page.pageCurrent;
                // this.map.pageSize = this.page.pageSize;
                this.$http.post("/business/business/findApproval?currentPage="+this.page.pageCurrent+"&pageSize="+that.page.pageSize,that.businessVo).then(function (resp) {
                    console.log(that.businessVo)
                    if (resp.data.code===200){
                        that.list = resp.data.data.list
                        console.log(that.list)
                        that.page.totalCount = resp.data.data.total
                    }
                })
            },
            //查询
            handleCheck() {
                this.searchBusiness();
            },
            // 重置查询条件
            handleReset() {
                this.reload()
            },
            // 刷新当前页面
            reload() {
                this.businessVo = {}
                this.searchBusiness()
            },
            handleSizeChange(val) {
                this.page.pageSize = val
                this.searchBusiness()
            },
            handleCurrentChange(val) {
                this.page.pageCurrent = val
                this.searchBusiness()
            },
            // 详情弹窗
            handleEdit(row) {
                this.infoList[0] = row;
                console.log(this.infoList)
                this.visible = true
            },
            //往imglist里添加url
            setimglist(url){
                this.srcList[0]=url;
            }
        }
    }
</script>

<style scoped>

</style>
